<template>
  <el-card body-style="min-height: 86vh">
    <!-- 搜索 -->
    <el-form :model="searchForm" label-width="80px" class="demo-form-inline">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="车主姓名">
            <el-input v-model="searchForm.customerName" placeholder="请输入车主姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系方式">
            <el-input v-model="searchForm.customerPhone" placeholder="请输入联系方式" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车牌号">
            <el-input v-model="searchForm.licensePlate" placeholder="请输入车牌号" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button @click="handleRestSearch()">重置</el-button>
            <el-button type="primary" @click="handleGetTableList()">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider />
    <!-- 新增、筛选按钮 -->
    <div class="flex justify-between">
      <div>
        <el-button type="primary" @click="handleOpenRepairOrder">开维修单</el-button>
      </div>
      <div>
        <el-button circle @click="handleGetTableList()">
          <template #icon><el-icon>
              <Refresh />
            </el-icon></template>
        </el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData">
      <el-table-column label="车主姓名" align="center" width="120" prop="customerName" />
      <el-table-column label="车主电话" align="center" width="180" prop="customerPhone" />
      <el-table-column label="车型" align="center" prop="vehicleModel" />
      <el-table-column label="车牌号" align="center" width="180" prop="licensePlate" />
      <el-table-column label="状态" align="center">
        <template #default="{ row }">
          <el-tag v-if="row.status === 1">已完工</el-tag>
          <el-tag v-if="row.status === 2" type="danger">作废</el-tag>
          <el-tag v-if="row.payStatus === 1">已结算</el-tag>
          <el-tag v-if="row.isPickUpCar === 1">已取车</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="240" align="center">
        <template #default="{ row }">
          <el-button v-if="row.status === 0" type="primary" size="small"
            @click="handleEditRepairOrder(row)">编辑</el-button>
          <el-button v-if="row.status === 0" type="primary" size="small" @click="handleReserve(row)">预检</el-button>
          <el-button v-if="row.status === 0" type="primary" size="small" @click="handleMaintain(row)">维修</el-button>
          <el-button type="primary" size="small" @click="handleDetail(row)">详情</el-button>
          <el-popconfirm v-if="row.status === 0" title="是否要作废该维修单？" width="240" @confirm="handleCancleOrder(row)">
            <template #reference>
              <el-button type="danger" size="small">作废</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="flex justify-center mt-2" background layout="total,prev, pager, next"
      :current-page="currentPage" :page-size="limit" :total="total" @current-change="handleGetTableList" />
    <!-- 开维修单 -->
    <order-drawer ref="formDrawerOrder" @success="handleGetTableList()"></order-drawer>
    <!-- 预检 -->
    <reserve-dialog ref="formDialogReserve" @success="handleGetTableList()"></reserve-dialog>
    <!-- 维修 -->
    <maintain-dialog ref="formDialogMaintain" @success="handleGetTableList()"></maintain-dialog>
    <!-- 详情 -->
    <detail-dialog ref="formDialogDetail" @success="handleGetTableList()"></detail-dialog>
  </el-card>
</template>
<script setup lang="ts">
import { ref, defineAsyncComponent } from "vue";
import useRepairStore from "@/stores/modules/repair";
import { useInitTable } from "@/hooks/useCommon";
import { getEmployeeListApi } from "@/api/repair";
import {
  getExamineListApi,
  getExamineInfoApi,
  getRepairOrderListApi,
  getProjectAccessoryInfoApi,
  cancelRepairOrderApi
} from "@/api/examine";

const OrderDrawer = defineAsyncComponent(() => import("./components/orderDrawer.vue"));
const ReserveDialog = defineAsyncComponent(() => import("./components/reserveDialog.vue"));
const MaintainDialog = defineAsyncComponent(() => import("./components/maintainDialog.vue"));
const DetailDialog = defineAsyncComponent(() => import("./components/detailDialog.vue"));

const useRepair = useRepairStore();

//表格
const { tableData, searchForm, currentPage, limit, total, handleRestSearch, handleGetTableList } =
  useInitTable({
    searchForm: {
      customerName: "",
      customerPhone: "",
      licensePlate: "",
      checkStatus: ""
    },
    getTableList: getRepairOrderListApi
  });

// 当前选中维修单
const curOrder = ref<any>(null);
// 开维修单
const formDrawerOrder = ref(null);
const handleOpenRepairOrder = () => {
  handleGetMasterList();
  (formDrawerOrder.value as any)?.handleCreate();
};
// 编辑
const handleEditRepairOrder = (row: any) => {
  handleGetMasterList();
  (formDrawerOrder.value as any)?.handleEdit({
    id: row.id,
    carId: row.car.id,
    licensePlate: row.car.licensePlate,
    vin: row.car.vin,
    customerId: row.customer.id,
    customerName: row.customer.customerName,
    customerPhone: row.customer.phone,
    vehicleModel: row.car.vehicleModel,
    mileageNum: row.car.mileageNum,
    insuranceExpireTime: row.car.insuranceExpireTime,
    annualExpireTime: row.car.annualExpireTime,
    energyType: row.energyType,
    pickCarUserId: row.pickCarUserId
  });
};
// 预检
const formDialogReserve = ref(null);
const handleReserve = (row: any) => {
  curOrder.value = row;
  useRepair.$patch((state) => {
    state.curOrder = row;
  });
  handleGetExamineList();
  handleGetExamineInfo();
  (formDialogReserve.value as any)?.handleCreate();
};
// 维修
const formDialogMaintain = ref(null);
const handleMaintain = (row: any) => {
  curOrder.value = row;
  useRepair.$patch((state) => {
    state.curOrder = row;
  });
  handleGetProjectAccessoryInfo();
  (formDialogMaintain.value as any)?.handleCreate();
};
// 详情
const formDialogDetail = ref(null);
const handleDetail = (row: any) => {
  curOrder.value = row;
  useRepair.$patch((state) => {
    state.curOrder = row;
  });
  handleGetExamineInfo();
  handleGetProjectAccessoryInfo();
  (formDialogDetail.value as any)?.handleCreate();
};
// 作废
const handleCancleOrder = async (row: any) => {
  try {
    await cancelRepairOrderApi({ orderId: row.id });
    handleGetTableList();
  } catch (error) {
    console.log(error);
  }
};

// 获取接车师傅列表
const handleGetMasterList = async () => {
  const res = await getEmployeeListApi();
  useRepair.$patch((state) => {
    state.masterList = res as any;
  });
};

// 获取检查项目列表
const handleGetExamineList = async () => {
  const res = await getExamineListApi();
  useRepair.$patch((state) => {
    state.examineList = res as any;
  });
};
// 回显填写的检查项目信息
const handleGetExamineInfo = async () => {
  const res = await getExamineInfoApi({ repairOrderId: curOrder.value?.id });
  useRepair.$patch((state) => {
    state.curReserveInfo = res as any;
  });
};

// 回显填写的服务项目信息
const handleGetProjectAccessoryInfo = async () => {
  const res = await getProjectAccessoryInfoApi({ orderId: curOrder.value?.id });
  useRepair.$patch((state) => {
    state.curProjectAccessoryInfo = res as any;
  });
};
</script>
<style scoped lang="scss">
:deep(.el-upload--picture-card) {
  width: 60px;
  height: 60px;
}

:deep(.el-upload-list__item) {
  width: 60px;
  height: 60px;
}
</style>
